<template>
  <div>
    <h2>父组件</h2>
    <div>
      <h3>父组件中的数据：</h3>
      <p>当前项目：{{ currentItem }}</p>
      <p>更新次数：{{ updateCount }}</p>
      
      <div class="controls">
        <button @click="updateChildItem">更新子组件项目</button>
      </div>
    </div>
    
    <!-- 
      使用子组件并填充插槽内容
      1. 默认插槽：直接在组件标签内提供内容
      2. 具名插槽：使用 v-slot:name 或 #name 指定插槽
      3. 作用域插槽：使用 v-slot:name="slotProps" 接收子组件数据
    -->
    <Child>
      <!-- 默认插槽内容 -->
      <template #default>
        <div class="custom-content">
          <p>这是父组件提供的<strong>默认插槽</strong>内容</p>
        </div>
      </template>
      
      <!-- 具名插槽内容 -->
       <!-- #header 写法等同于  -->
      <template #header>
        <div class="custom-content header-content">
          <h4>自定义标题</h4>
          <p>这是父组件提供的123<strong>具名插槽</strong>内容</p>
        </div>
      </template>
      
      <!-- 
        作用域插槽内容
        通过 v-slot:name="slotProps" 或 #name="slotProps" 接收子组件传递的数据
      -->
      <template #content="{ item, index, updateItem }">
        <div class="custom-content content-slot">
          <p>项目名称: <strong>{{ item }}</strong></p>
          <p>索引: <strong>{{ index }}</strong></p>
          <button @click="() => updateItem('来自父组件的新值')">
            更新项目
          </button>
        </div>
      </template>
      
      <!-- 另一个作用域插槽示例 -->
      <template #footer="{ stats }">
        <div class="custom-content footer-slot">
          <p>统计信息:</p>
          <ul>
            <li>浏览量: {{ stats.views }}</li>
            <li>点赞数: {{ stats.likes }}</li>
            <li>评论数: {{ stats.comments }}</li>
          </ul>
        </div>
      </template>
    </Child>
  </div>
</template>

<script lang="ts" setup>
/**
 * 插槽 (Slot) 详解 - 父组件部分
 * 
 * 1. 插槽的使用方式：
 *    1.1 默认插槽：
 *        <Child>默认内容</Child>
 *        或使用具名语法：
 *        <Child><template #default>默认内容</template></Child>
 * 
 *    1.2 具名插槽：
 *        <Child>
 *          <template #header>标题内容</template>
 *          <template #footer>底部内容</template>
 *        </Child>
 * 
 *    1.3 作用域插槽：
 *        <Child>
 *          <template #content="slotProps">
 *            {{ slotProps.item }}
 *          </template>
 *        </Child>
 * 
 * 2. 插槽语法的演变：
 *    - Vue 2.6 之前：slot="name" 和 slot-scope="props"
 *    - Vue 2.6 之后：v-slot:name="props" 或简写为 #name="props"
 */

import { ref } from 'vue';
import Child from './child.vue';

// 父组件中的数据
const currentItem = ref('父组件项目');
const updateCount = ref(0);

// 更新子组件数据的方法
function updateChildItem() {
  currentItem.value = '更新的父组件项目 - ' + new Date().toLocaleTimeString();
  updateCount.value++;
}

/**
 * 3. 插槽的高级用法：
 * 
 * 3.1 解构插槽 Props：
 *     <template #content="{ item, index }">
 *       {{ item }} - {{ index }}
 *     </template>
 * 
 * 3.2 动态插槽名：
 *     <template #[dynamicSlotName]>
 *       动态插槽内容
 *     </template>
 * 
 * 3.3 插槽默认值：
 *     <template #content="{ item = '默认项目' }">
 *       {{ item }}
 *     </template>
 * 
 * 4. 插槽的优缺点：
 * 
 * 优点：
 * - 提高组件的复用性和灵活性
 * - 允许父组件控制子组件的部分内容
 * - 作用域插槽实现了子到父的数据传递
 * 
 * 缺点：
 * - 过度使用可能导致模板复杂难以维护
 * - 作用域插槽的数据流向不如 props 直观
 * 
 * 5. 最佳实践：
 *    5.1 为插槽提供有意义的名称
 *    5.2 为插槽提供合理的默认内容
 *    5.3 在文档中清晰说明插槽的用途和可用的 props
 *    5.4 避免在一个组件中使用过多的插槽
 */
</script>

<style scoped>
/* 父组件样式 */
div {
  background: linear-gradient(to right, #8e2de2, #4a00e0);
  border-radius: 15px;
  padding: 30px;
  color: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  max-width: 800px;
  margin: 20px auto;
}

h2 {
  font-size: 28px;
  margin-bottom: 25px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  position: relative;
  padding-bottom: 15px;
}

h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 3px;
}

.controls {
  margin: 15px 0;
}

button {
  background-color: white;
  color: #8e2de2;
  border: none;
  padding: 8px 15px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  margin-right: 10px;
}

button:hover {
  background-color: #f0f0f0;
  color: #4a00e0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* 自定义插槽内容样式 */
.custom-content {
  padding: 10px;
  border-radius: 6px;
  background-color: white;
  color: #333;
}

.header-content {
  background-color: #e3f2fd;
  border-left: 4px solid #2196f3;
}

.content-slot {
  background-color: #e8f5e9;
  border-left: 4px solid #4caf50;
}

.footer-slot {
  background-color: #fff8e1;
  border-left: 4px solid #ffc107;
}

.custom-content h4 {
  margin-top: 0;
  color: #2196f3;
}

.custom-content ul {
  margin: 5px 0;
  padding-left: 20px;
}

.custom-content button {
  background-color: #4caf50;
  color: white;
  margin-top: 8px;
}

.custom-content button:hover {
  background-color: #388e3c;
  color: white;
}
</style>